<template>
  <div class="content">
    <div class="error">
      <img src="../assets/imgs/404.png" alt="页面访问失效" />
      <div>
        <h2>404</h2>
        <p>您访问的页面丢了...</p>
        <el-button type="primary" size="small" @click="linkto()">
          {{ count }}秒后跳转回首页
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 5,
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.count--
      if (this.count === -1) {
        this.$router.push('/')
        clearInterval(this.timer)
      }
    }, 1000)
  },
  methods: {
    // $router.push('/'),
    // clearInterval("timer")
    linkto() {
      this.$router.push('/')
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="less" scoped>
html,
body,
#app {
  height: 100%;
}
.content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
